<template>
  <div class="shopInfoDiscount">
    <div class="left">
      <div v-for="(x,y) in leftList" :class="isShow == y?'leftBox show':'leftBox'" @click="leftShow(y)">
        <transition name="el-zoom-in-center">
          <p class="ht1" v-show="isShow == y"></p>
        </transition>
        <p class="leftTxt"><span>{{x.text}}</span><span v-show="isShow == y">{{x.msg}}</span></p>
      </div>
    </div>
    <div class="right">
      <div class="rightBox" v-for="(x,y) in rightList">
        <img :src="x.src" alt="">
        <div class="rightBox-l">
          <p class="rt-l-name">{{x.name}}</p>
          <p class="rt-l-ys">已销售{{x.ys}} | 好评{{x.hpl}}%</p>
          <div class="rt-l-money">
            <div>
              <p class="rt-l-dzhd"><img src="../../../../static/img/dazhehuodong.png" alt=""><span>9.5折限一份</span></p>
              <p>
                <span style="font-size: .09rem">￥</span>
                <span>{{x.money}}</span>
                <span style="font-size: .1rem;text-decoration: line-through">￥{{x.dz}}</span>
              </p>
            </div>
            <p class="rt-l-xgg" v-show="x.isGuige" @click="isGuige">选规格</p>
            <img v-show="!x.isGuige" src="../../../../static/img/jiarugouwuche.png" alt="" class="rt-l-add"></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-l">
        <div class="ft-l-img">
          <img src="../../../../static/img/gouwuche111.png" alt="">
          <p class="ft-l-num">2</p>
        </div>
        <p class="ft-hj">
          <span style="font-size: .14rem;color: #7E7E7E">合计：</span>
          <span>￥</span>
          <span style="font-size: .22rem">188.</span>
          <span>00</span>
        </p>
      </div>
      <div class="ft-btn">去结算</div>
    </div>
    <!--  选择支付  -->
    <div class="ggfukuan" v-show="look">
      <div class="fkbox">
        <div class="fktit">{{ggList.name}}</div>
        <div class="fkitem">
          <p>{{ggList.tit1.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit1.list" :class="ggList.thisSel[0]==y?'selected':''" @click="selGG(0,'tit1',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="fkitem">
          <p>{{ggList.tit2.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit2.list" :class="ggList.thisSel[1]==y?'selected':''" @click="selGG(1,'tit2',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="fkitem">
          <p>{{ggList.tit3.name}}</p>
          <div>
            <p v-for="(x,y) in ggList.tit3.list" :class="ggList.thisSel[2]==y?'selected':''" @click="selGG(2,'tit3',y)">
              {{x}}</p>
          </div>
        </div>
        <div class="yxguige">
          <p>已选规格：</p>
          <p><span v-for="x in arr">{{x}}&nbsp;&nbsp;</span></p>
        </div>
        <div class="guifoot">
          <p><span>￥</span>32</p>
          <p>加入购物车</p>
        </div>
        <img src="../../../../static/img/ggshanchu.png" alt="" class="closeGuiGe" @click="closeGuiGe">
      </div>
    </div>


  </div>
</template>

<script>

  import Vue from 'vue';
  import {ActionSheet, popup} from 'vant';

  Vue.use(ActionSheet);
  Vue.use(popup);
  export default {
    name: "shopInfoDiscount",
    data() {
      return {
        leftList: [{text: '优惠套餐', msg: '最新活动价格'}, {text: '主食小炒', msg: '最新活动价格'}, {
          text: '面食小吃',
          msg: '最新活动价格'
        }, {text: '各种卤味', msg: '最新活动价格'}, {text: '特色小吃', msg: '最新活动价格'}, {text: '盖浇饭', msg: '最新活动价格'}, {
          text: '凉菜',
          msg: '最新活动价格'
        }, {text: '主食', msg: '最新活动价格'}, {text: '饮品', msg: '最新活动价格'}],
        isShow: 0,
        rightList: [{
          src: '../../../../static/img/shop1.png',
          name: '大曲梦之黄900ml',
          ys: 2904,
          hpl: 99,
          money: 98.9,
          dz: 100,
          isGuige: true
        }, {
          src: '../../../../static/img/shop2.png',
          name: '通天柔红山葡萄甜酒',
          ys: 2904,
          hpl: 99,
          money: 320,
          dz: 480,
          isGuige: false
        }, {
          src: '../../../../static/img/shop3.png',
          name: '英国芝华士威士忌500ml',
          ys: 2904,
          hpl: 99,
          money: 180,
          dz: 288,
          isGuige: false
        }, {
          src: '../../../../static/img/shop1.png',
          name: '大曲梦之黄900ml',
          ys: 2904,
          hpl: 99,
          money: 98.9,
          dz: 100,
          isGuige: true
        }, {
          src: '../../../../static/img/shop1.png',
          name: '大曲梦之黄900ml',
          ys: 2904,
          hpl: 99,
          money: 98.9,
          dz: 100,
          isGuige: true
        }],
        arr: ['小份', '标准冰(推荐)', '有奶油'],
        look: false,
        show1: false,
        ggList: {
          name: '百香果酸乳酪慕斯（木糖醇）',
          tit1: {name: '规格', list: ['小份', '中份', '大份']},
          tit2: {name: '温度', list: ['标准冰(推荐)', '热', '温']},
          tit3: {name: '奶油', list: ['有奶油', '无奶油']},
          thisSel: [0, 0, 0]
        },
        sel1: '外卖配送',
        actions: [
          {name: '到店自取'},
          {name: '外卖配送'},
        ],
        showList: true,
      }
    },
    methods: {
      closeGuiGe() {
        this.look = !this.look;
      },
      isGuige() {
        this.look = true;
      },
      ggShow() {
        this.look = true;
      },
      selGG(index, name, num) {
        let arr = [...this.arr];
        arr[index] = this.ggList[name].list[num]
        this.arr = arr;
        let arr1 = this.ggList;
        arr1.thisSel[index] = num;
        this.ggList = arr1;
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show1 = false;
        this.sel1 = item.name;
      },
      leftShow(index) {
        this.isShow = index;
      }
    }
  }
</script>

<style scoped>
  .shopInfoDiscount {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    font-family: PingFang SC;
  }

  .left {
    width: 30%;
    height: 3.3rem;
    overflow-x: hidden;
    background-color: #ffffff;
  }

  .right {
    height: 3.3rem;
    overflow-x: hidden;
    width: 70%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding: .1rem .15rem;
  }

  .leftBox {
    height: .44rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding-left: .15rem;
    color: #343434;
  }

  .ht1 {
    width: .03rem;
    height: 100%;
    background-color: #FE4845;
    position: absolute;
    left: 0;
    top: 0;
  }

  .ht2 {
    width: .15rem;
    height: .15rem;
    background: rgba(254, 72, 69, 1);
    border-radius: .02rem;
    margin-right: .05rem;
  }

  .leftTxt {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .leftTxt > span {
    font-weight: 500;
    font-size: .14rem;
  }

  .leftTxt > span:nth-child(2) {
    font-size: .1rem;
  }

  .show {
    color: #FE4845 !important;
  }

  .rightBox {
    width: 100%;
    height: .7rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .25rem;
  }

  .rightBox > img {
    width: .7rem;
    height: .7rem;
  }

  .rightBox-l {
    width: calc(100% - .7rem);
    height: 100%;
    box-sizing: border-box;
    padding-left: .05rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .rt-l-name {
    font-size: .13rem;
    font-weight: bold;
    color: #333333;
  }

  .rt-l-ys {
    font-size: .1rem;
    font-weight: 500;
    color: #808080;
  }

  .rt-l-money {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .rt-l-money >div> p:nth-child(2) {
    font-size: .13rem;
    font-weight: 400;
    color: #999999;
  }
  .rt-l-dzhd>img {
    width: .1rem;
    margin-right: .05rem;
  }
  .rt-l-dzhd>span {
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FE4845;
  }

  .rt-l-add {
    width: .27rem;
    height: .27rem;
  }

  .rt-l-xgg {
    width: .57rem;
    height: .29rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .14rem;
    text-align: center;
    line-height: .29rem;
    font-size: .12rem;
    font-weight: 500;
    color: #ffffff;
  }

  .footer {
    width: 100%;
    height: .6rem;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    justify-content: space-between;
    background-color: #ffffff;
  }

  .footer-l {
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .ft-l-img {
    width: .3rem;
    height: .23rem;
    position: relative;
    text-align: center;
    margin-right: .15rem;
  }

  .ft-l-img > img {
    width: .26rem;
    height: .23rem;
  }

  .ft-l-num {
    width: .2rem;
    height: .2rem;
    background: rgba(237, 36, 33, 1);
    border-radius: 50%;
    font-size: .1rem;
    text-align: center;
    line-height: .2rem;
    color: #ffffff;
    font-weight: 500;
    position: absolute;
    top: -.15rem;
    right: -.11rem;
  }

  .ft-hj {
    color: #EE2826;
    font-size: .12rem;
    font-weight: 500;
  }

  .ft-btn {
    width: .91rem;
    height: .35rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .17rem;
    text-align: center;
    line-height: .35rem;
    font-size: .15rem;
    font-weight: bold;
    color: #ffffff;
  }


  .ggfukuan {
    width: 100%;
    /*height: 6.67rem;*/
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .6);
  }

  .fkbox {
    width: 3.25rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: 1rem auto;
    box-sizing: border-box;
    padding: .1rem .2rem;
    padding-bottom: 0;
    position: relative;
  }

  .fktit {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .fkitem {
    margin-bottom: .1rem;
  }

  .fkitem > p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #242424;
    margin-bottom: .1rem;
  }

  .fkitem > div {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    /*justify-content: space-between;*/
  }

  .fkitem > div > p:nth-child(2) {
    margin: 0 .2rem;
  }

  .fkitem > div > p {
    width: .8rem;
    height: .36rem;
    background: rgba(241, 241, 241, 1);
    border: .01rem solid #F1F1F1;
    border-radius: .07rem;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #666666;
    text-align: center;
    line-height: .36rem;
  }

  .yxguige {
    height: .4rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FAFAFA;
  }

  .yxguige > p:nth-child(1) {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yxguige > p:nth-child(2) {
    color: #333333;
  }

  .guifoot {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .guifoot > p:nth-child(1) {
    font-size: .24rem;
    font-family: San Francisco Display;
    font-weight: 500;
    color: #FF433C;
  }

  .guifoot > p:nth-child(1) > span {
    font-size: .16rem;
  }

  .guifoot > p:nth-child(2) {
    width: 1.08rem;
    height: .35rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .17rem;
    line-height: .35rem;
    text-align: center;
    color: #ffffff;
    font-size: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
  }

  .closeGuiGe {
    width: .38rem;
    height: .38rem;
    position: absolute;
    left: calc(50% - .19rem);
    bottom: -.52rem;
  }

  .selected {
    background: rgba(255, 239, 220, 1) !important;
    border: .01rem solid rgba(255, 118, 17, 1) !important;
    color: #FF7611 !important;
  }

</style>
